iT邦幫忙

2022 iThome 鐵人賽

DAY 12
0
Modern Web

JS 忍者訓練計畫系列 第 12

原型之物件導向(上) Day11

  • 分享至 

  • xImage
  •  

warning: 在撰寫複雜的可用程式碼之前,理解原型繼承模型很重要。另外,請注意程式碼內原型鏈的長度、必要時打破它們,以避免潛在的效能問題。再來,除非要處理 JavaScript 新語法的相容性,否則絕對不能擴充原生的原型

如何運用屬性 prototype,可以深入 JS 使用物件導向的能力:

  • 理解 prototype, constructor
  • 建構式與執行呼叫的差別
  • 如何判斷物件類型,出自哪個建構式
  • JavaScript 的繼承關係,附加與加入的差別
  • 潛藏危機處理
    • 擴充 Object
    • 延伸 Number
    • 繼承原生物件撰寫子類別
    • 實體化相關問題
  • JavaScript 繼承父類別與子類別,如何實作

(下面看一些程式慢慢熟悉 prototype 用法)

這章想學到什麼?

  • 物件實體化,new 運算子作用的對象是建構式函式用來啟用空間配置程序並建立新物件。
  • 建構式與物件型別
  • 以原型繼承關係

程式碼閱讀練習與撰寫

new 運算子作用的對象是建構式函式用來啟用空間配置程序並建立新物件

  1. 原型裡的屬性綁定物件實體 //定義它
  2. 建構式函式裡的屬性加入物件實體 //實現它
var o = {};
o.name = 'Saito';
o.occupation = 'marksman';
o.cyberizationLevel = 20;

function Ninja(){}

Ninja.prototype.swingSword = function(){
    return true;
}
var ninja1 = Ninja();
ninja1 //undefined

var ninja2 = new Ninja();
ninja2.swingSword() //true

屬性查詢流程

  1. 當要存取物件的屬性參照時,先檢查物件本身是否擁有該屬性,若有就取得其值,如果沒有的話......
  2. 找出物件的原型,檢查有無該屬性,若有就取得值,如果沒有的話......
  3. 值會是 undefined

建構式與物件型別

function Ninja(){}

var ninja = new Ninja();

typeof ninja === "object" //true
ninja instanceof Ninja //true
ninja.constructor === Ninja //true

以原型繼承關係

function Person(){}
Person.prototype.dance = function(){};

function Ninja(){}

Ninja.prototype = new Person();
var ninja = new Ninja();

參考資料

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Inheritance_and_the_prototype_chain


上一篇
閉包封鎖之術(下) Day10
下一篇
原型之物件導向(下) Day12
系列文
JS 忍者訓練計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言